<template>
    <div class="Left">
        <img src="../../assets/image/leftImg/title.png" alt="" class="logo">
        <div  v-for="(item,index) in list"
             :key="item.id"
             :class="[state===index?'title2':'title1']"
             @click="changeIt(index)">
            <img :src="state===index?item.src1:item.src" alt="" class="ico">
            <span class="words" >{{item.name}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "left",
        props:["state"],
        data(){
            return{
                list:[
                    {
                        name:'显示',
                        'src': require('../../assets/image/leftImg/show.png'),
                        'src1': require('../../assets/image/leftImg/show1.png')
                    },
                    {
                        name:'节点管理',
                        'src': require('../../assets/image/leftImg/node.png'),
                        'src1': require('../../assets/image/leftImg/node1.png')
                    },
                    {
                        name:'文件管理',
                        'src': require('../../assets/image/leftImg/file.png'),
                        'src1': require('../../assets/image/leftImg/file1.png')
                    },
                    {
                        name:'分布式',
                        'src': require('../../assets/image/leftImg/distribution.png'),
                        'src1': require('../../assets/image/leftImg/distribution1.png')
                    },
                ],
                isActive:0,
            }
        },
        methods:{
            changeIt(ind){
                this.isActive= ind;

                if(ind===0){
                    this.$router.push({
                        name:'Show',
                    });

                }

                if(ind===1){
                    this.$router.push({
                        name:'NodeManagement',
                    });
                }

                if(ind===2){
                    this.$router.push({
                        name:'FileManage',
                    });
                }

                if(ind===3){
                    this.$router.push({
                        name:'Distributed',
                    });
                }


            },
        },
    }
</script>

<style lang="less">
    .Left{
        background: #ffffff;
        height: 100%;
        width: 250px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        align-items: center;
        .logo{
            margin-bottom: 47px;
            margin-top: 28px;
            width: 206px;
            height: 31px;
        }
        .title1{
            width: 209px;
            height: 48px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 48px;
            color: #000000;
            cursor: pointer;
            .ico{
                margin-left: 19px;
                margin-right: 8px;
            }
        }
        .title2{
            width: 209px;
            height: 48px;
            background: #8cc5ff;
            border-radius: 10px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 48px;
            color: #0E8BF8;
            cursor: pointer;
            .ico{
                margin-left: 19px;
                margin-right: 8px;
            }
        }
    }





</style>
